<template>
    <div class="usersbox">
        <h3>用户管理</h3>
        <el-row>
                <router-link to='/user/index'  class="backindex">返回</router-link>
            </el-row>
      <el-table :data="userData">
        <el-table-column prop="username" label="用户账号" width="80">
        </el-table-column>
        
        <!-- 右边操作按钮 -->
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <!-- **难点** 按钮想要绑定点击事件处理方法；需要传 对应参数 -->
            
            <el-button @click="deleteUser(scope.row._id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
</template>

<script>
  export default {
    data() {
      return {

        userData:[]
       
      }
    },

methods:{        
        //获取页面数据
          updateUser(){
              this.$http.get( 'users' ).then( res =>{
                  console.log(res) 
                this.userData = res   //当axios拦截器不起作用使用res.data            
              }).catch( res =>{
                console.log( res)
              })
          },
          //删除用户数据
          deleteUser( id){
              ///进行二次确认 
              this.$confirm('确认重新编辑, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
              //console.log( id)    
              this.$http.delete( `users/${id}`, /* {
                      headers: {
                          "Authorization": localStorage.getItem("UserToken")
                      } 
                  } */           
                  ).then( (res) =>{            
                  console.log( res)
                  //更新页面
                  this.updateUser();
                  }).catch( res =>{
                    console.log( res)
                        //提示服务端返回的错误信息
                        //当axios拦截器不起作用使用下行代码
                        //this.$message.error(res.response.data);
                  })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
            },
          },  
    created(){
      /* 在created周期去后端获取数据； */
      this.updateUser();            
    },
}  

</script>

<style scoped>
.usersbox{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.backindex{
    display: inline-block;
    text-decoration: none;
    margin-top: -20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction:row-reverse;
    color:rgb(0, 129, 204)
}
</style>